<template>
    <div class="box" >
        <div class="box-header">
            <Header></Header>
        </div>
        <div class="fixicon" v-if="!showBookList">
            <div class="scroll-box">
            <div class="first-box">
                <div class="second-box">
                    <div :class="['scroll-item',index==flag&&'active']" :style="{'width':hasStyle }" @click="getIndex(index,item.name)" v-for="(item, index) in categories" :key="index">{{ item?.title }}</div>
                </div>
            </div>
        </div>
        <div @click="showBookList=!showBookList" class="showicon">﹀</div>
        </div>
        <div class="showList" v-if="showBookList">
            <div class="booklistTop">
                <div class="check">请选择分类</div>
                <div class="chexkIcon" @click="showBookList=!showBookList">︿</div>
            </div>
            <div class="bookList" > 
                <div class="bookList-item" @click="getIndex(index,item.name)" v-for="(item,index) in categories" :key="index">{{ item.title }}</div>
            </div>
        </div>
        <a :href="`https://m.ximalaya.com/${item.url}`"  v-for="(item,index) in subjectsNew" :key="index">
        <div class="news" >
                <div class="new-img"><img class="imgwidth" :src="'https:'+item.coverPathSmall" alt=""></div>
                <div class="news-right">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-data">
                    <div v-if="item.contentType==1" class="iconfont icon-shipinbofang"></div>
                    <div v-if="item.contentType==2" class="iconfont icon-youyinpin"></div>:
                    <div class="news-num">{{ item.dataCount }}</div>
                    <div>{{ moment(parseInt(item.releaseAt)).format('YYYY-MM-DD')}}更新</div>
                </div>
            </div>
            </div>
            </a>
       
    </div>
</template>

<script setup lang="ts">
import Header from "@/components/Header/Header"
import userListenList from "@/stores/listen"
import moment from "moment"
import listenApi from "@/api/listen"
import { onMounted, computed, ref,onUnmounted } from "vue"
import { useRouter } from "vue-router"
const router =useRouter()
const listenListStore = userListenList()
const categories = computed(() => listenListStore.listeningList.categories)
let subjects = ref([])
let subjectsNew=ref([])
const flag = ref(1)
const showBookList = ref(false)
const title = ref('remen')
const pageNum = ref(1)
const pageSize = ref(20)
const hasStyle=ref('-(flag+1)*70px')
const widthShow = ref(false)

const getIndex = (index, name) => {
    subjectsNew.value=[] 
    flag.value = index
    title.value = name
    showBookList.value = false
    if (index > 3) {
        widthShow.value=true
    } else {
        widthShow.value=false
    }
    // console.log(name)
    // console.log(title)
    getsSubjectList(title.value,pageNum.value,pageSize.value)
}
const listenBottomOut = () => {
    window.addEventListener("scroll", () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
// console.log(scrollTop,windowHeight,scrollHeight)
        if (scrollTop + windowHeight > scrollHeight-20) {      
        // console.log('到底了')
            pageNum.value++
    // console.log(pageNum.value)
   getsSubjectList(title.value,pageNum.value,pageSize.value)
    } else {
        return
    }
  })

}
const  getsSubjectList=async() =>{
            let result = await listenApi.reqBoFangList(title.value, pageNum.value, pageSize.value)
            subjects.value = result.data
            subjectsNew.value.push(...result.data?.subjects)
            // console.log(result)
}
// const containerRef = ref(null)
    // const items = ref([])
    // const loading = ref(false)
    // const page = ref(1)
 
    // const handleScroll = () => {
    //   const container = containerRef.value
    //   if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
        // loadMore()
        // console.log('到底了');
    //   }
    // }

onMounted(() => {
    listenListStore.getListenList()
  getsSubjectList()
    listenBottomOut()
    // learnmore()
})
onUnmounted(() => {
    window.removeEventListener("scroll", () => {})
})
</script>

<style scoped>
.box {
    height: 100%;
    width: 100%;

    .box-header {
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        z-index: 3;

    }
.fixicon{
    position: relative;
    .showicon{
        position: absolute;
        right: 0;
        top: 0px;
        background-color: white;
        z-index: 6;
        width: 50px;
        height: 44.4px;
        line-height: 44.4px;
        text-align: center;
        font-weight: 300;
        color:#c0b8b8 ;
        font-size: 20px;
        border-left: 1px solid #c0b8b8;
        border-bottom:1px solid #c7bfbf ;
    }
}
    .scroll-box {
        margin-top: 40px;
        width: 100%;
        overflow: hidden;
        

        .first-box {
            overflow-x: scroll;
            border-bottom: 1px solid #c4bcbc;
            &::-webkit-scrollbar {
            display: none;
        }
            .second-box {
                /* padding: 10px 0; */
                display: flex;
align-items: center;

                .scroll-item {
                    /* width: 18%; */
                    height: 100%;
                    line-height: 100%;
                    flex-shrink: 0;
                    padding: 10px 0;
                    margin-left: 30px;
                    font-size: 16px;
                    color: #767373;
                    
                }
                .active{
                        border-bottom: 3px solid red;
                       color: black;
                        font-size: 22px;
                        flex-shrink: 0;
                        
                    }
                   
            }
        }
    }
.showList{
    margin-top: 50px;
    background-color: white;
    z-index: 6;
    .booklistTop{
        border-bottom: 1px solid #aaa;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        .check{
            margin-left: 16px;
            color: #aaa;
        }
        .chexkIcon{
            width: 50px;
            text-align: center;
            color: red;
            border-left: 1px solid #aaa;
        }
    }
    .bookList{
        display: flex;
        flex-wrap: wrap;
        height: 390px;
        overflow: hidden;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        .bookList-item{
            width: 26%;
            background-color: #e6dfdf;
            border-radius: 4px;
            text-align: center;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            margin-left: 18px;
            margin-top: 18px;
        }
    }
}
.news{
    padding: 15px;
   display: flex;
    .new-img{
        width: 70px;
        height: 70px;
        .imgwidth{
            width: 70px;
            height: 70px;
        }
    }
    .news-right{
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
.news-title{
    font-size: 16px;
}
.news-data{
    display: flex;
  color: #aaa;
    align-items: center;
    .news-num{
        margin-left: 6px;
        margin-right: 14px;
    }
}
    }
}
}</style>